<template>
  <div class="login">
    <div class="login_warp">
      <div class="flex flex-horizontal-between">
        <div class="system-title">
          <p class="p-cn">麦房易管理后台</p>
          <p class="p-en">MAIFANGYI MANAGEMENT BACKGROUND SYSTEM</p>
        </div>
        <div class="login_from" style="min-width: 380px">
          <h3 class="login_from_title">
            {{ timeType }}
            <br />
            欢迎回来!
          </h3>
          <!-- 手机验证码登录 -->
          <template v-if="loginType === 1">
            <input-phone :value="params" @roles="(val) => (roleList = val)" />
            <input-code :value="params" @roles="(val) => (roleList = val)" />
          </template>
          <!-- 密码登录 -->
          <template v-if="loginType === 2">
            <input-phone :value="params" @roles="(val) => (roleList = val)" />
            <input-pwd :value="params" @roles="(val) => (roleList = val)" />
          </template>
          <div class="login-button">
            <Button type="primary" size="large" :loading="logining" @click="onLogin">
              {{ logining ? '登录中...' : '登录' }}
            </Button>
            <p style="display: flex; justify-content: space-between">
              <span v-if="loginType === 2" @click="onForget">忘记密码</span>
              <span v-else></span>

              <span v-if="loginType === 1" @click="onLoginType(2)">使用密码登录</span>
              <span v-else @click="onLoginType(1)">使用验证码登录</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- <footer>
      <div class="footer">
        <p style="color: #333">Copyright © www.hft.tospurfang.com 版权所有</p>
      </div>
    </footer> -->
  </div>
</template>
<script>
  import inputCode from './input/code.vue'
  import inputPwd from './input/pwd.vue'
  import inputPhone from './input/phone.vue'
  import loginMgr from '.././biz/index'
  import dt from '@dt/dt'
  import { userStore } from '@/store/user'

  export default {
    components: {
      inputPhone,
      inputCode,
      inputPwd
    },
    data() {
      return {
        timeType: '上午好',
        roleList: [],
        loginType: 2,
        params: {
          phone: '',
          codeOrPwd: '',
          uuid: '',
          roleId: ''
        },
        logining: false
      }
    },
    created() {
      this.checkTimeType()
      dt.tool.clearStorage(['isbuildFlag', 'rouList', 'buildrouList', 'buttonControl', 'menuControl'])
      userStore().logout()
    },
    methods: {
      // 登录
      onLogin() {
        // 校验成功
        if (this.onValidate()) {
          this.logining = true
          let obj = {
            type: this.loginType,
            phone: this.params.phone,
            codeOrPwd: this.params.codeOrPwd,
            roleId: this.params.roleId - 0
          }
          loginMgr
            .login(obj)
            .then(() => {
              this.logining = false
              this.$emit('success')
            })
            .catch((err) => {
              this.logining = false
              throw err
            })
        }
      },
      onForget() {
        this.$emit('forget')
      },
      // 登录字段校验
      onValidate() {
        let { phone, codeOrPwd, roleId } = this.params
        if (!phone) {
          dt.ui.Message.warning('请输入手机号')
          return false
        }
        const reg = /^1[3456789]\d{9}$/
        if (!reg.test(phone)) {
          dt.ui.Message.warning('手机号码有误，请核对')
          return false
        }
        if (this.loginType === 1) {
          if (!codeOrPwd || codeOrPwd.length != 6) {
            dt.ui.Message.warning('请输入6位验证码')
            return false
          }
        } else {
          if (!codeOrPwd) {
            dt.ui.Message.warning('请输入密码')
            return false
          }
        }
        if (!roleId) {
          dt.ui.Message.warning('您尚未选择角色,请先选择角色')
          return false
        }
        return true
      },
      onLoginType(val) {
        this.loginType = val
        this.params = {
          phone: '',
          code: '',
          password: '',
          uuid: '',
          roleId: ''
        }
      },
      // 判断当前时间是早上 中午 下午 晚上好
      checkTimeType() {
        let now = new Date(),
          hour = now.getHours()
        if (hour < 9) {
          this.timeType = '早上好'
        } else if (hour < 12) {
          this.timeType = '上午好'
        } else if (hour < 14) {
          this.timeType = '中午好'
        } else if (hour < 17) {
          this.timeType = '下午好'
        } else {
          this.timeType = '晚上好'
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .login {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url('https://static.tospurfang.com/pc/login_bs.png') no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;

    .login_warp {
      width: 100%;
      margin: auto 8%;

      .system-title {
        margin-top: 30px;

        .p-cn {
          font-size: 4vw;
          font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
          background: linear-gradient(270deg, #41e3f8 0%, #ffffff 100%);
          font-weight: bold;
          color: #ffffff;
          line-height: 93px;
          letter-spacing: 2px;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .p-en {
          margin-top: 10px;
          font-size: 1.25vw;
          font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;
          font-weight: 400;
          color: #ffffff;
          line-height: 27px;
          letter-spacing: 1px;
        }
      }
    }

    footer {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 255, 255, 0.6);
      border-radius: 15px;
      padding: 0 20px;
      height: 30px;
      line-height: 30px;
    }

    &_from {
      padding: 70px 50px;
      width: 30%;
      height: 55%;
      background-color: #fff;
      box-shadow: 0px 22px 14px 0px rgba(2, 24, 122, 0.21);

      &_title {
        font-size: 40px;
        font-weight: 600;
        margin-bottom: 8%;
        text-align: left;
        color: #1b1f4d;
      }
    }

    .login-button {
      margin-top: 20px;

      > p {
        margin: 20px 0;
        text-align: right;

        span {
          color: #3461df;
          cursor: pointer;
          font-size: 16px;
        }
      }

      button {
        width: 100%;
        height: 56px;
        font-size: 20px;
        background-color: #2d61f4;
        border-color: #2d61f4;
      }
    }
  }
</style>
